<template>
  <div>
    <!-- <el-date-picker
      v-model="value1"
      type="date"
      format="yyyy-MM-DD"
      style="width: 160px; margin-left: 10px"
      :picker-options="pickerOptions"
      @change="handleDateChange"
      placeholder="选择日期"
    >
    </el-date-picker -->
    <el-date-picker
      v-model="value1"
      type="date"
      @change="handleDateChange"
      style="width: 160px; margin-left: 10px"
      placeholder="选择日期">
    </el-date-picker>
    <!-- <span>请选择年月</span> -->
    <div
      class="echart"
      ref="mychart"
      id="mychart"
      :style="{ float: 'left', width: '100%', height: '450px' }"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getGoods } from "@/api/teahouse/vip";
import { getEchartData } from "@/api/teahouse/sportsData";

export default {
  data() {
    return {
      myChart:null,
      value1: new Date(), // 双向绑定的日期值
      pickerOptions: {
        disabledDate(time) {
          // 禁选当前日期之后的日期
          return time.getTime() > Date.now();
        },
      },
      name: "张雪",
      xData: [],//["煊赫门", "红方印", "玉溪", "云烟", "白利群", "南京"], //横坐标数据
      yData: [],//[5, 20, 36, 10, 10, 20], //纵坐标数据，与横坐标对应
    };
  },
  mounted() {
   // this.initGoods();
   const date = new Date();
const formattedDate = this.formatDate(date); // 使用 formatDate 函数格式化日期
const parms = { "date": formattedDate, "userId": this.$store.state.user.id };
    this.initData(parms);
  },
  methods: {
    handleDateChange(value) {
      console.log(value)
      // 处理日期变更事件
      const formattedDate = this.formatDate(value);
      console.log("选择的日期:", formattedDate);
      // 在这里可以添加其他处理逻辑
      //重新查询数据、初始化图表
      this.yData=[]
      this.xData=[]
      console.log(this.$store.state.user.id)
      const parms={"date":formattedDate,"userId":this.$store.state.user.id};
      this.initData(parms);
    },
    formatDate(date) {
      const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始，需要加1
  const day = String(date.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
    },
    initData(parms){
      getEchartData(parms).then((response)=>{
        console.log(response)
        console.log(response.data);
        const arr=response.data;
        arr.forEach(element => {
          console.log(element)
          this.xData.push(element.exerciseDate)
          this.yData.push(element.caloriesBurned)
        });
        console.log(this.xData)
        this.initEcharts();
      });
    },
    initGoods() {
      const date=this.formatDate(this.value1);
      getGoods(date).then((response) => {
        // this.xData = response.data;
        // this.yData=response.data;
        console.log(response.data);
        const arr=response.data;
        arr.forEach(element => {
          console.log(element)
          this.xData.push(element.exerciseDate)
          this.yData.push(element.caloriesBurned)
        });
        console.log(this.xData)
        this.initEcharts();
      });
      
    },
    initEcharts() {
      // 如果已经存在图表实例，则销毁它
    if (this.myChart) {
      this.myChart.dispose();
    }
      const option = {
        title: {
          text: "七天内运动cal消耗统计",
        },
        tooltip: {},
        legend: {
          data: ["卡路里"],
        },
        xAxis: {
          name: "时间",
          data: this.xData,
        },
        yAxis: {
          axisLabel: {
            formatter: "{value} cal", // 设置 y 轴刻度的显示格式
          },
          max: 1000, // 设置 y 轴的最大刻度值
          min: 0, // 设置 y 轴的最小刻度值
          interval: 100, // 设置刻度的间隔
        },

        series: [
          {
            name: "卡路里",
            type: "line", //bar类型为柱状图
            data: this.yData,
          },
        ],
      };
      this.myChart = echarts.init(this.$refs.mychart); // 图标初始化
      this.myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    },
  },
};
</script>
